@extends('layouts.default')

@section('title')
    代理商管理
@stop

@section('pre')
    <li class="active"><span>@yield('title')</span></li>
@stop

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="main-box">
            <header class="main-box-header clearfix">
            <h2>代理商列表</h2>
            </header>

            <div class="col-md-12">
                <div class="pull-right">
                    <input type="submit" value='创建代理商' name="submit" class="btn btn-success md-trigger modal-create" data-modal="modal-info" data-id="">
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <header class="main-box-header clearfix">
                    <h2 class="pull-left" id="group-table-title"></h2>
                    <div id="reportrange" class="pull-right daterange-filter">
                        <i class="icon-calendar"></i>
                        <span></span><b class="caret"></b>
                    </div>
                    </header>
                    <div class="main-box-body clearfix">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            用户名
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            昵称
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            设备数量
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            电话
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            创建时间
                                        </th>
                                        <th>
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if( !empty( $agentList ) )

                                        @foreach( $agentList as $val )

                                            <tr>
                                                <td>{{ $val->username }}</td>
                                                <td>{{ $val->nickname }}</td>
                                                <td>{{ $val->dev_count }}</td>
                                                <td>{{ $val->mobile }}</td>
                                                <td>{{ $val->created_at }}</td>
                                                <td><input class="btn btn-primary col-xs-3 modal-info md-trigger  " data-modal="modal-info" value="编辑"
                                                data-id="{{$val->id}}"  data-pro="{{$val->province}}" data-city="{{$val->city}}" data-cash_deposit="{{$val->cash_deposit}}"
                                                data-remainder="{{$val->remainder}}"
                                                ></td>
                                            </tr>

                                        @endforeach

                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <!-- @if( !empty( $agentList ) )
                        <ul class="pagination pull-right">
                            <?php //$agentList->render(); ?>
                        </ul>
                        @endif -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建代理商 -->
<div class="md-modal md-effect-11" id="modal-info">
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close">&times;</button>
            <h4 class="modal-title">创建代理商</h4>
        </div>
        <div class="modal-body">
            <form role="form" id="create-agent">
                <div class="form-group col-lg-12">
                    <label for="exampleInputFile" class="col-lg-3 control-label" >用户名</label>
                    <div class="input-group col-lg-6">
                        <input type="hidden" name="create" value="true">
                        <input type="text" class="form-control modal-data-info" name="username" >
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="password" class="col-lg-3 control-label" >密码</label>
                    <div class="input-group col-lg-6">

                        <input type="password" class="form-control modal-data-info" name="password" >
                    </div>
                </div>

                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">昵称</label>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control modal-data-info" name="nickname" >
                    </div>
                </div>

                <div class="form-group col-lg-12">
                    <label for="newPwd1" class="col-lg-3 control-label">省份</label>
                    <select id="loc_province" name="province">
                    </select>
                </div>
                <div class="form-group col-lg-12">
                    <label for="newPwd2" class="col-lg-3 control-label">市区</label>
                    <select id="loc_city" name="city">
                    </select>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">手机号</label>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control modal-data-info" name="mobile"  >
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">保证金</label>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control modal-data-info" name="cash_deposit" id="cash_deposit" >
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">余额</label>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control modal-data-info" name="remainder" id="remainder" disabled>
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <div class="checkbox-nice">
                        <input type="checkbox" id="checkbox-1" name="is_created" checked="checked">
                        <label for="checkbox-1">
                        允许创建子代理商
                        </label>
                    </div>
                </div>
                <div class="form-group" style="text-align: center">
                    <input type="submit" class="btn btn-info btn-xs" id="modal-submit" value="提交">
                    <button type="button" class="btn btn-danger btn-xs" id="modal-close">
                        关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@stop

@section('js')
    <script type="text/javascript" src="{{ asset('/js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('/js/bootstrap-datetimepicker.zh-CN.js') }}"></script>
    <script type="text/javascript">

        jQuery(document).ready(function() {

            $('#datepickerDateRange').daterangepicker({
                language:  'zh-CN',
                locale:
                {
                    applyLabel: '确认',
                    cancelLabel: '取消',
                    fromLabel: '从',
                    toLabel: '到'
                },
                format:'YYYY-MM-DD'
            });

            //关闭详情
            $("#modal-close").on('click', function(){
                $(".md-close").click();
            });

            //提交创建
            $("#create-agent").submit(function(){

                $(this).serialize();

            })
            //创建
            $('.modal-create').click(function(){

                $('input[name="create"]').val(1)

                $('.modal-title').html($(this).val())

                $('input[name="username"]').attr('disabled',false).val('')

                $('input[name="nickname"]').val('')

                $('input[name="mobile"]').attr('disabled',false).val('')

                $('input[name="cash_deposit"]').val('')

                $('input[name="remainder"]').parent('div').parent('div').hide()

                $("#modal-edit").attr('href',  '{{ action("DeviceController@edit") }}' + '/' + trObj.attr('id'));

            })

            //详情
            $(".modal-info").on('click', function(){

                $('input[name="create"]').val(0)

                $('.modal-title').html($(this).val());

                $('input[name="id"]').val($(this).attr('data-id'))

                $('input[name="remainder"]').val($(this).attr('data-remainder')).parent('div').parent('div').show();

                $('input[name="username"]').attr('disabled','true').val($(this).parent('td').parent('tr').children('td:eq(0)').html());

                $('input[name="password"]').attr('disabled',true).parents('div.form-group').hide()

                $('input[name="nickname"]').val($(this).parent('td').parent('tr').children('td:eq(1)').html());

                $('input[name="mobile"]').attr('disabled',true).val($(this).parent('td').parent('tr').children('td:eq(3)').html());

                $('input[name="cash_deposit"]').val($(this).attr('data-cash_deposit'))

                $('#loc_province').val($(this).attr('data-pro')).trigger("change")

                var loc	= new Location();

                loc.fillOption('loc_city' , '0,'+$('#loc_province').val());

                $('#loc_city').val($(this).attr('data-city')).trigger("change")

                //跳转
                $("#modal-edit").attr('href',  '{{ action("DeviceController@edit") }}' + '/' + trObj.attr('id'));

            });

        });

    </script>

@stop